<template>
  <div class="side-view">
    <template v-if="list.length">
      <t-input v-model="searchValue" class="search-input" placeholder="设备名称搜索">
        <template #suffixIcon>
          <search-icon :style="{ cursor: 'pointer' }" />
        </template>
      </t-input>

      <div class="list">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="item"
          :class="{ active: item.value === modelValue }"
          @click="handleClickItem(item)"
        >
          <svg-icon class="icon" :name="iconMap[item.status]"></svg-icon>
          {{ item.label }}
        </div>
      </div>
    </template>
    <template v-else>
      <div class="empty-wrap">
        <svg-icon class="icon" name="empty"></svg-icon>
        <div class="text">暂无设备</div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { SearchIcon } from 'tdesign-icons-vue-next';
import { ref } from 'vue';

defineProps({
  modelValue: {
    type: [Number, String],
    default: '',
  },
  list: {
    type: Array as any,
    default: () => {
      return [];
    },
  },
});

const emits = defineEmits(['update:modelValue', 'change']);

const searchValue = ref('');

const iconMap: any = {
  0: 'preview-online',
  1: 'preview-offline',
  2: 'preview-camera',
};

const handleClickItem = (data: any) => {
  emits('update:modelValue', data.value);
  emits('change', data.value, data);
};
</script>

<style lang="less" scoped>
.side-view {
  padding: 24px 12px;

  .search-input {
    margin-bottom: 4px;
  }

  .list {
    .item {
      height: 40px;
      border-bottom: 1px solid #c6ced9;
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 12px;
      color: #333;
      padding: 0 8px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
      }

      .icon {
        width: 16px;
        height: 16px;
      }
    }
  }

  .empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 74px 0 0;

    .icon {
      width: 106px;
      height: 106px;
    }

    text {
      color: #9e9e9e;
      font-size: 12px;
      margin-top: -50%;
    }
  }
}
</style>
